<template>
    <!-- 注意：此处无需使用“div”标签（因为在模板代码中不是只有“div”标签可被用作根元素，“el-breadcrumb”标签也可被用作根元素）↓ -->
    <el-breadcrumb separator="/">
      <!-- “$route”表示“路由对象”、“{ path: $route.path }”表示“动态地获取路由地址”、“{{$route.meta.title}}”表示“动态地获取路由元信息（数据）中的标题数据”↓ -->
      <el-breadcrumb-item class="line" :to="{ path: $route.path }">{{$route.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<style scoped>
  .el-breadcrumb{
    height: 10px;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);/* 这是Element UI中预置的一种边框的浅色投影样式 */
  }
  .line{
    border-left:3px solid rgb(58, 182, 255);/* 这行样式表示在“el-breadcrumb-item”标签中的文字的左边框的宽度为3像素，线条采用实线，颜色为“rgb(58, 182, 255)”表示的颜色 */
    padding-left: 10px;
  }
</style>